@import "../../css/variables";

.search {
  position: relative;

  input {
    color: $gray-500;
    border: 1px solid $gray-300;
    border-radius: $border-radius-tiny;
    font-size: $font-size-small;
    padding: 0.25rem 1.8rem 0.35rem 1.8rem;
    width: 100%;
    transition: $button-color-transition, $button-border-color-transition;
    background-color: transparent;

    &:focus {
      border-color: $gray-500;
      color: $gray-800;
    }
  }

  .autosuggest {
    position: absolute;
    top: 0;
    user-select: none;
    z-index: -100;
    opacity: 0.5;
  }

  .search-icon, .search-icon-delete {
    position: absolute;
    top: 0.55rem;
    height: 1rem;
    stroke: $gray-500;
    transition: stroke $button-transition-time $button-transition-ease;
  }

  .search-icon {
    left: 0.4rem;
  }

  input:focus + .search-icon {
    stroke: $gray-600;
  }

  .search-icon-delete {
    stroke: $gray-600;
    right: 0.4rem;
    height: 0.75rem;
    top: 0.7rem;
    opacity: 0;
    transition: opacity $button-transition-time $button-transition-ease;
    cursor: text;
  }

  &.has-content .search-icon-delete {
    opacity: 1;
    cursor: pointer;
  }
}
